<template>
  <!-- //自定义频道 -->
  <div>
    <div class="channel-edit">
      <!-- 我的频道 -->
      <div class="channel-wrap">
        <div class="title">
          <span>我的频道</span>
          <van-button
            type="danger"
            plain
            size="small"
            @click="isEdit = !isEdit"
            >{{ isEdit ? "取消" : "编辑" }}</van-button
          >
        </div>
        <!-- 使用插槽，使自定义频道点击的频道按钮高亮，:text="item.name"就不用写了，直接在插槽  里面写自己的内容，样式active直接写颜色即可 -->
        <van-grid>
          <van-grid-item
            v-for="(item, index) in ownChannels"
            :key="item.id"
            :text="item.name"
          >
            <span
              :class="{ active: index == active }"
              @click="intoChannel(index)"
              >{{ item.name }}</span
            >
            <!--推荐按钮不能删，不能加样式X; index 下标为0的时候也是false ，就不用判断index ！=0 了 -->
            <van-icon
              name="cross"
              class="del-icon"
              v-if="isEdit && index"
              @click="delChannel(index, item)"
            />
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 可选频道 -->
      <div class="channel-wrap">
        <div class="title">
          <span>可选频道</span>
        </div>

        <van-grid>
          <van-grid-item
            v-for="item in optionalChannel"
            :key="item.id"
            :text="item.name"
            @click="addChannel(item)"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { addChannelAPI, delChannelAPI, channelsAPI } from "@/api";
import { setChannel, getChannel, removeChannel } from "@/utils/storage";
export default {
  props: {
    allChannels: {
      type: Array,
      required: true, //必填
    },
    ownChannels: {
      type: Array,
      required: true, //必填
    },
    active: {
      require: true,
      type: Number,
    },
    // value: {
    //   require: true,
    //   type: Number,
    // },
  },
  //假如想改组件发送及接收的变量名的话使用这个
  model: {
    prop: "active", //等同于上面active的接收的数据事件名 ，父亲发送的叫v-model="active"
    event: "xx", //等同于下面xx的发送的数据事件名  ，父亲接收的叫v-model="active"
  },
  data() {
    return {
      //记录当前的频道编辑状态
      isEdit: false,

      // channels: [], //首页频道列表
    };
  },

  methods: {
    // 1.点击进入频道
    intoChannel(val) {
      // 将点击频道下标传给父组件
      this.$emit("xx", val);
      // 通知父组件关闭窗口
      this.$emit("close");
    },
    // 2.点击可选频道
    async addChannel(item) {
      //由于我的频道多了item单个对象数据，利用计算属性可选频道就减一
      this.ownChannels.push(item);
      if (this.$store.state.tokenObj.token) {
        await addChannelAPI({
          //对象数组 数据传入
          //参数一：id  参数二：我的频道列表要放得位置
          channels: [{ id: item.id, seq: this.ownChannels.length + 1 }],
        });
      } else {
        setChannel(this.ownChannels); //上面数组已经加了新的频道
      }
    },
    // 3.删除我的频道
    async delChannel(index, item) {
      this.ownChannels.splice(index, 1);
      if (this.active > index) {
        this.$emit("xx", this.active - 1); //--会报错，this.value - 1不会报错
        // this.active--; 直接这么写会报错，导致单项数据流了
      }
      if (this.$store.state.tokenObj.token) {
        await delChannelAPI(item.id);
      } else {
        // 没登录
        // 把剩余的我的频道数组保存到本地存储就行了//保存了还没取出来
        setChannel(this.ownChannels);
      }
    },
  },

  computed: {
    //可选频道 依赖所有频道和个人频道 计算的东西用计算属性里写函数
    optionalChannel() {
      // 1.最初版本
      // let res = this.allChannels.filter((value) => {
      //   // 过滤条件需要用到findIndex,可以过滤复杂类型
      //   // 判断当前这个元素在不在我的频道里面，在就不过滤出来
      //   // 不在就过滤出来
      //   let index = this.ownChannels.findIndex((v) => {
      //     if (v.id == value.id) return true;
      //   });
      //   // console.log(index); //0,1,2,3,4,-1(14)
      //   if (index == -1) return true;
      //   else return false;
      // });
      // // console.log(res);
      // return res;
      // 2.稍微优化版本
      // return this.allChannels.filter((value) => {
      //   let index = this.ownChannels.findIndex((v) => v.id == value.id);
      //   return index == -1;
      // });
      // 3.最终优化版本
      return this.allChannels.filter(
        (value) => this.ownChannels.findIndex((v) => v.id == value.id) == -1
      );
    },
  },
};
</script>

<style lang="less" scoped>
.channel-edit {
  padding: 0 20px;
  .channel-wrap {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
    }
    .del-icon {
      position: absolute;
      right: 5px;
      top: 7px;
      font-size: 13px;
    }
  }
  ::v-deep.active {
    color: red;
  }
}
</style>
